@charset "utf-8";
/* CSS Document */

/*设置最外围的容器，包裹里面的内容，因为里面的内容有图片，和div的文本内容，为了在同一位置可以显示出来，因此这个最外面包裹的元素要设置relative*/
.view_show_imgAndFont{border:1px solid #CCC; position:relative; background:#FFF; border-radius:5px;}

/*展示的图片	上传图片的时候必须保证这一批图片的宽高比例  宽度使用外面包裹的div的宽度（保证在响应式网页下的正常显示） 高度根据宽度自适应*/
.view_show_imgAndFont img{width:100%; padding:10px; height:auto;border-radius:5px;}

/*鼠标移入时产生的效果   transition产生的变化虽然影响到元素的width和height，但是由transition引起的width和height并不会影响外面元素被撑起来width和height*/
.view_show_imgAndFont:hover img{
	/*主要是为了兼容浏览器  不过大部分都用不着  all的意思是过渡效果对于所有的样式变化*/

	opacity:1;	
}

/*在鼠标移入图片，图片消失时候显示的文字    为了不会被img挤下去，因此使用position:absolute; 过渡动画的显示效果都是逐渐显示和显示，因此设置透明度0*/
.view_show_imgAndFont .mask{position:absolute;top:0px;left:0px;filter:alpha(opacity=0); opacity:0;width:0px;height:0px;text-align:center;color:#00AEFF; }

/*width height 变换像素大小  继承100%   rotate(360deg)表示360度旋转*/
.view_show_imgAndFont:hover .mask{
	/*主要是为了兼容浏览器  不过大部分都用不着  all的意思是过渡效果对于所有的样式变化*/
	transition:all 2s;	
	-ms-transition:all 2s;
	-moz-transition:all 2s;
	-webkit-transition:all 2s;
	-o-transition:all 2s;

	opacity:1;
	filter:alpha(opacity=100);

	height:100%;
	width:100%;
	
	/*transform:scale(0,0) rotate(360deg);  可以连写*/
	
	/*主要是为了兼容浏览器  不过大部分都用不着*/
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);

}


/*在mask里面加上的一层包裹了文字的div 通过最终div的宽度时100%，这样设置padding值的时候不会被超出，设置两边的padding，调整文字位置看着好看点  height为了防止文字过长（a标签是通过absolute，不被控制），因此设置高度为80%*/
.font_count{margin:10px; overflow:hidden; height:90%;background:#e0e0e0;}

/*因为文字高度的不确定性，因此使用absolute进行定位，定位到确定的位置，宽度变化导致位置不正确只能通过媒体查询去做*/
.view_show_imgAndFont:hover .mask a{ position:absolute;left:0px; bottom:13%;width:100%; text-align:center;}
/*通过padding 增大文字的背景大小*/
.view_show_imgAndFont:hover .mask span{ background:#8EA330; color:#FFF; padding:3px 5px;}

.view_show_imgAndFont:hover .mask a:hover{ text-decoration:none;}

/*设置鼠标移动到ready more的时候的颜色变化*/
.view_show_imgAndFont:hover .mask a:hover span{
	/*主要是为了兼容浏览器  不过大部分都用不着  all的意思是过渡效果对于所有的样式变化*/
	transition:all 2s;	
	-ms-transition:all 2s;
	-moz-transition:all 2s;
	-webkit-transition:all 2s;
	-o-transition:all 2s;

	background-color:#000;
}